import React, { Component, Suspense } from 'react';
import {renderRoutes} from 'react-router-config';
import route from "./router";
import Storage from '@/utils/storage'

import { withRouter } from 'react-router-dom'
// import Storage from '@/utils/storage'

import Footer from '@/components/Footer'



@withRouter
class App extends Component {
  checkAuthroute(pathname){
    const authRouter = ["/more/present"];
    if(authRouter.includes(pathname)){
      if(this.checkLogin()){
        // this.props.history.push(pathname)
        return;
      }
      this.props.history.push('/login')
    }
  }
  checkLogin(){
    if(Storage.get("token")){
      return true;
    }
    return false;
  }
  componentDidMount(){
    this.unPathListen = this.props.history.listen(location => {
      this.checkAuthroute(location.pathname)
    })
  }
  componentWillUnmount(){
    this.unPathListen()
  }
  render() {
    return (
      <>
        <Suspense fallback={
        <div class="loader-inner ball-grid-pulse" style={{height:'10px',margin: 'auto',position: 'absolute',left:0,top:0,bottom:0,right:0}}>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
        }>
          {renderRoutes(route)}
        </Suspense>
        <Footer {...this.props}/>
      </>
    )
  }
}

export default App;
